@charset "utf-8";

@function r($px){
    @return ($px/40)*1rem;
    
    
}

@function px($px){
    @return ($px/2) * 1px;
}

header{
    width: 100%;
    height:px(150);
.back input {
    width:r(123);
    height: px(57);
    font-size: r(26);
    margin-left: 23px;
    margin-top: 25px;
    border-radius: 17px;
    background: white;
    border: 2px solid #ff9344;
    /*margin-bottom: 18px;*/
}

.discover {
    font-size: 26px;
    margin-left: 55px;
    margin-top: 21px;
}

}

 .search1{
        margin-left: r(240);
        width: r(264);
        height: 25px;
        border: 1px solid #ff9344;
        border-radius: 25px;
        margin-top:6px;
        margin-bottom:20px ;
        font-size: 0;
        padding:0px 8px;
        box-sizing: border-box;
        input{
          
            vertical-align: middle;
            display: inline-block;
            border: none;
            width:calc(100% - 24px) ;
            height: 100%;
        }
        img{
            vertical-align: middle;
            width: 18px;
            height: 18px;
        }
    }
   

.seek{
    width: r(750);
    height: px(226);
    
    .searching {
        width: r(750);
       margin-bottom: r(10);
        
        label{
            font-size: r(26);
            // margin-left: 303px;
            display: block;
             text-align: center;
        }
    }
    
    .list button{
        width: r(140);
        height: px(66);
        font-size:r(20);
        text-align: center;
        color: #898989;
    }
    .list1,.list2{
    margin-left: r(90);
    margin-bottom: r(3);
    }
}

.trend{
    width: r(750);
    height: px(80);
    margin-top: r(25);
   
    .trend-pic{
        width: r(200);
        height:px(46);
        vertical-align: middle;
        margin-left: r(36);
        
        
        img{
          width: r(36);
          height:px(40);
          margin-top:r(-12) ;
          vertical-align: middle;
        }
    }
    .trend-pic a{
        font-size: r(30);
        color: black;
    }
    
      .more {
    vertical-align: middle;
     width: r(180);
    height: px(50); 
    //margin-right: 21px;
    //margin-top: 10px;
    img{
     width: r(55);
    height: px(50); 
     margin-top:r(-12) ;
    vertical-align: middle;
    }
}  

  .more a {
    font-size:r(24);
      color: black;
}

}

.photos{
    width: r(750);
    height: px(352);
    
   .photos1{
    width: r(280);
    height: px(352);
    margin-left:r(23); 
    img{
        width: 100%;
    }
   }
   
   .photos2{
     width: r(420);
     height: px(352);
     margin-left: r(10);
     
     .photos2one{
         width: r(420);
         height: px(136);
         //margin-bottom:r(20);
         img{
             width: 100%; 
         }
     }
     
     .photos2two{
         width: r(192);
         height: px(196);
         margin-right: r(12);
        img{
             width: 100%; 
         } 
     } 
     
     .photos2three{
         width: r(211);
         height: px(196);
         
         img{
             width: 100%; 
         } 
     }
   } 
}

.recommend-search{
    width: r(750);
    height: px(200);
    margin-bottom: 20px;
    .duck{
        width: r(226);
    height: px(200);
    margin-left: r(23);
    margin-right: r(15);
    }
    
    .badminton{
         width: r(210);
    height: px(200); 
    margin-right: r(17);
    }
    
    .pofeng{
       width: r(220);
    height: px(200);  
    }
}
@media screen and (min-width:370px){ 
    
  .photos2one{
         width: r(420);
         height: px(136);
         margin-bottom:r(20);
         img{
             width: 100%; 
         }
     }  
}

@media screen and (min-width:750px){ 
    
 .search1{
        margin-left: 240px;
        width: 264px;
        height: 25px;
        border: 1px solid #ff9344;
        border-radius: 25px;
        margin-top:6px;
        margin-bottom:20px ;
        font-size: 0;
        padding:0px 8px;
        box-sizing: border-box;
        input{
          
            vertical-align: middle;
            display: inline-block;
            border: none;
            width:calc(100% - 24px) ;
            height: 100%;
        }
        img{
            vertical-align: middle;
            width: 18px;
            height: 18px;
        }
    }     
    
.seek{
    width: 750px;
    height: 226px;
    
    .searching {
        width: 750px;
       margin-bottom: 10px;
        
        label{
            font-size: 26px;
            // margin-left: 303px;
            display: block;
             text-align: center;
        }
    }
    
    .list button{
        width: 140px;
        height: 66px;
        font-size:20px;
        text-align: center;
        color: #898989;
    }
    .list1,.list2{
    margin-left: 90px;
    margin-bottom: 3px;
    }
}

.trend{
    width: 750px;
    height: 80px;
    margin-top: 25px;
   
    .trend-pic{
        width: 200px;
        height:46px;
        vertical-align: middle;
        margin-left: 36px;
        
        
        img{
          width: 36px;
          height:40px;
          margin-top:-12px ;
          vertical-align: middle;
        }
    }
    .trend-pic a{
        font-size: 30px;
        color: black;
    }
    
      .more {
    vertical-align: middle;
     width: 180px;
    height: 50px; 
    //margin-right: 21px;
    //margin-top: 10px;
    img{
     width: 55px;
    height: 50px; 
     margin-top:-12px ;
    vertical-align: middle;
    }
}  

  .more a {
    font-size:24px;
      color: black;
}

}

.photos{
    width: 750px;
    height: 352px;
    
   .photos1{
    width: 280px;
    height: 352px;
    margin-left:23px; 
    img{
        width: 100%;
    }
   }
   
   .photos2{
     width: 420px;
     height: 352px;
     margin-left: 10px;
     
     .photos2one{
         width: 420px;
         height: 146px;
         margin-bottom:r(8);
         img{
             width: 100%; 
         }
     }
     
     .photos2two{
         width: 192px;
         height: 196px;
         margin-right: 12px;
        img{
             width: 100%; 
         } 
     } 
     
     .photos2three{
         width: 211px;
         height: 196px;
         
         img{
             width: 100%; 
         } 
     }
   } 
}

.recommend-search{
    width: 750px;
    height: 200px;
    margin-bottom: 20px;
    .duck{
        width: 226px;
    height: 200px;
    margin-left: 23px;
    margin-right: 15px;
    }
    
    .badminton{
         width: 210px;
    height: 200px; 
    margin-right: 17px;
    }
    
    .pofeng{
       width: 220px;
    height: 200px;  
    }
}    
    

}